<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>FlowCss - Carousel</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="redefining standard browser style standards" />
    <meta name="keywords" content="reset css, reset styles of browser, css reset"/>
	<meta name="robots" content="index, follow">
	<meta name="author" content="AlexDK">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="../../../css/flowcss.css">
</head>
<body>
    <section class="container py-30">
    <h1 class="color-green-4 mb-30">Carousel components</h1>
  
    <div id="carouselPrimary" class="carousel mb-30" data-fw-dots="false" data-fw-controls="true" style="height: 150px;">
      <button class="carousel-control carousel-control-prev"><i class="fas fa-chevron-left"></i></button>
      <button class="carousel-control carousel-control-next"><i class="fas fa-chevron-right"></i></button>
      
      <div class="carousel-container" data-fw-target="carousel" data-fw-toggle="carouselPrimary">
        <div class="carousel-item active">
          <div class="bg-pink-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">1</div>
        </div>
        <div class="carousel-item">
          <div class="bg-violet-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">2</div>
        </div>
        <div class="carousel-item">
          <div class="bg-orange-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">3</div>
        </div>
      </div>
    </div>

    <div id="carouselThird" class="carousel mb-30" data-fw-dots="true" data-fw-controls="true" style="height: 150px;">
      <button class="carousel-control carousel-control-prev"><i class="fas fa-chevron-left"></i></button>
      <button class="carousel-control carousel-control-next"><i class="fas fa-chevron-right"></i></button>
      
      <div class="carousel-container" data-fw-target="carousel" data-fw-toggle="carouselThird">
        <div class="carousel-item active">
          <div class="bg-cyan-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">1</div>
        </div>
        <div class="carousel-item">
          <div class="bg-dark-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">2</div>
        </div>
        <div class="carousel-item">
          <div class="bg-indigo-4 color-white d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">3</div>
        </div>
      </div>

      <div class="carousel-dots">
        <div class="carousel-dot color-white"></div>
        <div class="carousel-dot color-white"></div>
        <div class="carousel-dot color-white"></div>
      </div>
    </div>

    <section id="carouselSecondary" class="carousel" data-fw-controls="false" data-fw-dots="true" style="height: 150px;">
      <div class="carousel-container" data-fw-target="carousel" data-fw-toggle="carouselSecondary">
        <div class="carousel-item active">
          <div class="bg-blue-4 d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">1</div>
        </div>
        <div class="carousel-item">
          <div class="bg-green-4 d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">2</div>
        </div>
        <div class="carousel-item">
          <div class="bg-red-4 d-flex justify-ct-center align-its-center py-30 expand-600 font-size-10">3</div>
        </div>
      </div>
    
      <div class="carousel-dots">
        <div class="carousel-dot color-white"></div>
        <div class="carousel-dot color-white"></div>
        <div class="carousel-dot color-white"></div>
      </div>
    </section>

  </section>

  <script src="../../../js/flowcss.js"></script>
</body>
</html>
